<template>

	<div style="width: 1100px;">

		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{  path: '/adminHome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item><a href="/adminHome">业务审核</a></el-breadcrumb-item>
			<el-breadcrumb-item>实名认证</el-breadcrumb-item>
		</el-breadcrumb>

		<el-card class="box-card" style="width: 1200px; margin-top: 1.875rem; margin-right: -100px;">
			<div style="float: left; margin-top:1.875rem ;">
				<!-- <el-input type="txte" v-model="queryInfo.typeId" placeholder="认证状态" style="width: 200px;height: 50px;"> -->
				<el-select v-model="value" placeholder="请选择">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
				</el-input>
				<el-button type="primary" icon="el-icon-search" @click="queryAll">查询</el-button>
			</div>


			<el-table :data="tableData" border style="width: 100%">

				<el-table-column type="expand">
					<template slot-scope="scope">
						身份证号：{{scope.row.idcard}}<br />

						<el-image style="width: 150px; height: 150px;margin-top: 0.625rem;"
							:src="'http://localhost:8080/smrzimg?touXiang='+scope.row.idcardImg" :fit="fit">
						</el-image>
						<el-image style="width: 150px; height: 150px;margin-top: 0.625rem; margin-left: 0.625rem;"
							:src="'http://localhost:8080/smrzimg?touXiang='+scope.row.idcardImg" :fit="fit">
						</el-image>
					</template>
				</el-table-column>

				<el-table-column prop="typeId" label="资质类型">
					<template slot-scope="scope">
						<span v-if="scope.row.typeId==1">商业公司</span>
						<span v-if="scope.row.typeId==2">个体公商户</span>
						<span v-if="scope.row.typeId==3">个人经营</span>
						<span v-if="scope.row.typeId==4">政府非盈利机构</span>
					</template>
				</el-table-column>
				<el-table-column prop="userId" label="用户ID">
				</el-table-column>
				<el-table-column prop="realName" label="真实姓名">
				</el-table-column>
				<el-table-column prop="phoneNumber" label="电话号">
				</el-table-column>
				<el-table-column prop="isRenZheng" label="认证状态">
					<template slot-scope="scope">
						<span v-if="scope.row.isRenZheng==1">待认证</span>
						<span v-if="scope.row.isRenZheng==2">通过认证</span>
						<span v-if="scope.row.isRenZheng==3">认证失败</span>
					</template>
				</el-table-column>



				<el-table-column label="操作" width="200px">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="通过认证" placement="top-start">
							<el-button type="success" icon="el-icon-finished" @click.once="tongguo(scope.row.trueId,2)"
								v-if="scope.row.isRenZheng==1">
							</el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="拒绝认证" placement="top-start">
							<el-button type="success" icon="el-icon-s-release" @click.once="tongguo(scope.row.trueId,3)"
								v-if="scope.row.isRenZheng==1">
							</el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="删除认证" placement="top-start">
							<el-button type="success" icon="el-icon-delete" @click="deleteSmrz(scope.row.trueId)"
								v-if="scope.row.isRenZheng!=1">
							</el-button>
						</el-tooltip>
					</template>

				</el-table-column>
			</el-table>


			<!-- 分页 -->

			<el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pageNum"
				:page-sizes="[1, 4, 8, 10]" :page-size="3" layout="total, prev, pager, next, jumper" :total="total">
			</el-pagination>


		</el-card>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				tableData: [],
				queryInfo: {
					pageNum: 1,
					typeId: '',
					total: 0
				},
				value:'',
				 options: [{
				          value: '1',
				          label: '待审核'
				        }, {
				          value: '2',
				          label: '审核通过'
				        }, {
				          value: '3',
				          label: '审核失败'
				        }, {
				          value: '4',
				          label: '众筹中'
				        }, {
				          value: '5',
				          label: '众筹成功'
				        },
						{
						  value: '6',
						  label: '众筹失败'
						}
						]

			}
		},
		methods: {
			//删除认证信息
			deleteSmrz(id) {
				this.$confirm('确定删除吗', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					var res = await this.$http.get('deleteSmrz?trueId=' + id)
					if (res.data.code == 200) {
						this.queryAll()
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					}else{
						this.$message({
							type: 'success',
							message: '删除失败!'
						});
					}

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},

			// 通过审核
			async tongguo(trueId, isRenZheng) {

				var param = new URLSearchParams();
				param.append('trueId', trueId)
				param.append('isRenZheng', isRenZheng)
				var res = await this.$http.post('updateSmrz', param);
				if (res.data.code == 200) {
					this.$message(res.data.message)
					this.queryAll()
				} else {
					this.$message.error(res.data.message)
				}

			},


			//查询全部
			async queryAll() {

				var param = new URLSearchParams();
				param.append('pageNum', this.queryInfo.pageNum)
				param.append('typeId', this.value)
				var res = await this.$http.post('querySmrzAll', param)
				this.tableData = res.data.data.list
				this.total = res.data.data.total
				console.log(res.data.data.list)
			},
			// 页码大小
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			// 页码变动
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val;
				this.queryAll();
			}

		},
		async mounted() {
			this.queryAll()

		}
	}
</script>

<style>
</style>
